<template>
  <view class="from-input" @click="$emit('click')">
    <view class="from-input-show">
      <view class="from-input-show-content">
        <view class="from-input-title">{{ name }}</view>
        <view class="from-input-value">{{ value }}</view>
      </view>
      <image lazy-load v-if="icon" class="from-input-show-go" src="/static/image/nextIcon.png" />
    </view>
  </view>
</template>

<script>
export default {
  props: ['name', 'value', 'icon']
}
</script>

<style scoped>
.from-input {
  width: 690rpx;
  height: 129rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx #ede9e9 solid;
  margin: 0 30rpx;
}
.from-input-show {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.from-input-show-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}
.from-input-show-go {
  color: #9a9ba3;
  font-size: 30rpx;
  padding-left: 27rpx;
  width: 13rpx;
  height: 24rpx;
}
.from-input-title {
  color: #152c62;
  font-size: 30rpx;
  line-height: 42rpx;
  letter-spacing: 2rpx;
}
.from-input-value {
  color: #9a9ba3;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 300rpx;
  text-align: right;
}
</style>
